<template>
  <div class="blogSort">
    <el-card class="blogSort-margin">
      <!--输入框区域和按钮区域 -->
      <el-row class="demo-autocomplete">
        <el-col class="el-width-max">
          <el-input v-model="input" placeholder="请输入博客名"></el-input>
        </el-col>
        <el-button type="primary" icon="el-icon-search">查找</el-button>
        <el-button type="primary" icon="el-icon-edit">添加分类</el-button>
        <el-button type="danger" icon="el-icon-delete">删除选中</el-button>
        <el-button type="info" icon="el-icon-document">点击量排序</el-button>
        <el-button type="info" icon="el-icon-document">引用量排序</el-button>
      </el-row>
      <!-- table表格区域 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="序号" width="130"> </el-table-column>
        <el-table-column prop="name" label="分类名" width="130"> </el-table-column>
        <el-table-column prop="name" label="分类介绍" width="130"> </el-table-column>
        <el-table-column prop="name" label="点击数" width="130"> </el-table-column>
        <el-table-column prop="name" label="排序" width="130">
          <template slot-scope>
            <el-tag type="warning">383</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="创建时间" width="130"> </el-table-column>
        <el-table-column prop="name" label="状态" width="130"> </el-table-column>
        <el-table-column label="操作" fixed="right" width="220">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleEdit(scope.row)">置顶</el-button>
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="9"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'BlogSort',
  data() {
    return {
      input: '',
      restaurants: [],
      state1: '',
      value: '',
      options: [
        {
          value: '1',
          label: 'zs',
        },
        {
          value: '3',
          label: 'ls',
        },
      ],
      // 表单
      tableData: [1, 2, 3, 4, 5, 6],
      // 分页
      pagesize: 100, // 每页显示条目个数
      total: 37, // 总条数
      currentpage: 1, // 当前页数
    };
  },
  methods: {
    querySearch() {},
    // 点击编辑触发的函数
    handleEdit() {},
    // 点击删除触发的函数
    handleDelete() {},
    // 当选择项发生变化时会触发该事件
    handleSelectionChange() {},
    handleSizeChange() {},
    handleCurrentChange() {},
  },
};
</script>

<style lang="less" scoped>
.blogSort-margin {
  border-radius: 0;
  .el-width-max {
    width: 200px;
    margin-right: 5px;
  }
}
</style>
